<template>
  <div class="main">
    <!-- 头部 -->
    <div class="question-header">
      <span style="font-size: 12px;color: pink;">
        说明：目前支持学科和关键字条件筛选
      </span>
      <el-button type="success" size="small" @click="$router.push('new')">
        <i class="el-icon-edit"></i>
        新增试题
      </el-button>
    </div>
    <!-- 选项框 -->
    <el-form class="fromList" ref="fromList" :model="formData">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select
              v-model="formData.subjectID"
              @change="getCatalog"
              clearable
            >
              <el-option
                v-for="item in subjects"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="formData.catalogID" clearable>
              <el-option
                v-for="item in catalog"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="formData.tags" clearable>
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="formData.keyword" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="formData.questionType" clearable>
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="formData.difficulty" clearable>
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="formData.direction" clearable>
              <el-option
                v-for="(item, i) in direction"
                :key="i"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="formData.creatorID" clearable>
              <el-option
                v-for="item in creator"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="formData.remarks" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="formData.shortName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              style="width:49%;margin-right:2%"
              v-model="formData.province"
              @change="citys"
              clearable
            >
              <el-option
                v-for="(item, i) in province"
                :key="i"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-select style="width:49%" v-model="formData.city" clearable>
              <el-option
                v-for="(item, i) in city"
                :key="i"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button size="small" @click="clearBtn">
              清除
            </el-button>
            <el-button type="primary" size="small" @click="btn">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from "@/api/hmmm/subjects";
import { simple as simple2 } from "@/api/hmmm/directorys";
import { simple as tagSimple } from "@/api/hmmm/tags";
import { simple as getCreator } from "@/api/base/users";
import { questionType, difficulty, direction } from "@/api/hmmm/constants";
import { provinces, citys } from "@/api/hmmm/citys";
export default {
  created() {
    this.subjectsList();
    this.provinces();
  },
  data() {
    return {
      subjects: [],
      catalog: [],
      tags: [],
      creator: [],
      province: [],
      city: [],
      questionType,
      difficulty,
      direction,
      formData: {},
    };
  },
  methods: {
    async subjectsList() {
      const res = await simple({ pagesize: 100 });
      const re = await getCreator();
      this.subjects = res.data;
      this.creator = re.data;
    },
    async getCatalog() {
      delete this.formData.catalogID;
      const res = await simple2({ subjectID: this.formData.subjectID });
      const re = await tagSimple({ subjectID: this.formData.subjectID });
      this.catalog = res.data;
      this.tags = re.data;
    },
    provinces() {
      this.province = provinces();
    },
    citys(e) {
      delete this.formData.city;
      this.city = citys(e);
    },
    clearBtn() {
      this.formData = {};
      this.city = [];
      this.$emit("search", 0);
    },
    btn() {
      this.$emit("search", this.formData);
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  .question-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
  }
  .el-col {
    height: 51px;
  }
  .el-alert {
    margin-bottom: 15px;
  }
}
::v-deep .el-form-item__label {
  width: 80px;
}
::v-deep .el-select--medium {
  width: 100%;
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-form-item__content {
  margin-left: 80px;
  text-align: right;
}
</style>
